<style scoped>
    .layui-row {
        overflow: hidden;
    }
    .select-item {
        float: left;
        width: 100%;
        height: auto !important;
        word-break:break-all;
    }
    .layui-row:after, .layui-row:before {
        clear: none;
    }
    .layui-form >>> .layui-form-select{
        z-index: inherit;
    }
    .department >>> .layui-table td, .layui-table th {
        padding: 9px 2px;
        white-space: nowrap;
    }
    select{
        color: #eee
    }
    option{
        color: #000;
    }
    .layui-inline {
        padding: 5px 0;
    }
</style>

<template>
    <div class="department">
        <form class="layui-form " >

            <div  class="layui-col-lg4 select-item" >
                <label>查询条件: </label>
                <div class="layui-inline" style="width: 200px">
                    <input type="text" v-model="starttime" id="starttime" autocomplete="off" placeholder="请选择开始时间" class="layui-input key">
                </div>
                <div class="layui-inline" style="width: 200px">
                    <input type="text" v-model="endtime" id="endtime" autocomplete="off"  placeholder="请选择结束时间" class="layui-input key">
                </div>
                <div class="layui-inline" style="width: 200px">
                    <select id="currentDepart" name="depguid" placeholder="请选择部门"   class="layui-form-select" lay-search   >
                        <option value="">请选择部门</option>
                        <!--                        <option v-for="(item, index) in departments" :key="item.guid" :value="item.guid">{{item.name}}</option>-->
                    </select>
                </div>
                <div class="layui-inline" style="width: 200px">
                    <select id="currentApply" name="operatorid" class="layui-form-select" lay-search   >
                        <option value="">请选择销售人员</option>
                        <!--                        <option v-for="(item, index) in applyers" :key="item.guid" :value="item.guid">{{item.name}}</option>-->
                    </select>
                </div>
                <div class="layui-inline" style="width: 200px;">
                    <select id="currentRoom" name="storermguid" placeholder="请选择库房" class="layui-form-select"  lay-search  >
                        <option value="">请选择库房</option>
                        <!--                        <option v-for="(item, index) in storeroom" :key="item.guid" :value="item.guid">{{item.name}}</option>-->
                    </select>
                </div>
                <div class="layui-inline" style="width: 200px; margin-left: 64px;">
                    <select id="currentCustomer" name="customerguid" class="layui-form-select" lay-search >
                        <option value="">请选择客户</option>
                        <!--                        <option v-for="(item, index) in customers" :key="item.guid" :value="item.guid">{{item.name}}</option>-->
                    </select>
                </div>
                <div class="layui-inline" style="width: 200px">
                    <select id="currentProduct" name="productguid" class="layui-form-select" placeholder="请选择产品" lay-search >
                        <option value="">请选择产品</option>
                        <!--                        <option v-for="(item, index) in products" :key="item.guid" :value="item.guid">{{item.productname}}</option>-->
                    </select>
                </div>
                <div class="layui-inline" style="width: 200px">
                    <select name="spguid" lay-search  id="currentSp" class="layui-form-select">
                        <option value="">请选择规格</option>
                        <!--                        <option v-for="(item, index) in sps" :key="item.guid" :value="item.guid">{{item.name}}</option>-->
                    </select>
                </div>
                <div class="layui-inline" style="width: 200px">
                    <select id="currentStatus" name="status" class="layui-form-select" lay-search >
                        <option value="">请选择状态</option>
                        <option v-for="(item, index) in status" :key="item.dictkey" :value="item.dictkey">{{item.dicttext}}</option>
                    </select>
                </div>
            </div>

            <div  class="layui-col-lg4 select-item" >
                <label>汇总条件: </label>
                <div class="layui-inline">
                    <input type="checkbox" name="depcondition" id="depcondition" value="depart"  title="销售部门" >
                    <input type="checkbox" name="applycondition" id="applycondition" value="apply"  title="销售人员" >
                    <input type="checkbox" name="srcondition" id="srcondition" value="sr"  title="库房" >
                    <input type="checkbox" name="customercondition" id="customercondition" value="customer"  title="客户" >
                </div>
                <div class="layui-inline" style="width: 225px;height: auto">
                    <select v-model="ordercondition" name="ordercondition" id="ordercondition"  class="layui-form-select"   >
                        <option value="">请选择产品或规格</option>
                        <option value="product">产品</option>
                        <option value="sp">规格</option>
                    </select>
                </div>
                <button type="button" class="layui-btn sou" @click="search">搜索</button>
                <button type="button" class="layui-btn sou" @click="exportExcel">导出excel</button>
            </div>

        </form>
        <div style="width: 100%;overflow: auto;">
            <table class="layui-table layui-form" >
                <thead>
                <tr>
                    <!--                    <th v-if="listdata.length != 0 && listdata[0].sellcode !== '' && listdata[0].sellcode !== undefined">销售单号</th>-->
                    <!--                    <th v-if="listdata.length != 0 && listdata[0].createtime !== '' && listdata[0].createtime !== undefined">订单时间</th>-->
                    <!--                    <th v-if="depcondition == 'depart'">销售部门</th>-->
                    <!--                    <th v-if="applycondition == 'apply'">销售人员</th>-->
                    <!--                    <th v-if="customercondition == 'customer'">客户名称</th>-->
                    <!--                    <th v-if="customercondition == 'customer'">联系电话</th>-->
                    <!--                    <th v-if="srcondition == 'sr'">出库库房</th>-->
                    <!--                    <th>收货地址</th>-->
                    <!--                    <th>出库总重量</th>-->
                    <!--                    <th>到货总重量</th>-->
                    <!--                    <th>结算总金额</th>-->
                    <!--                    <th v-if="ordercondition == 'product' || ordercondition == 'sp'">产品名称</th>-->
                    <!--                    <th v-if="ordercondition == 'sp'">规格</th>-->
                    <!--                    <th>产品出库重量</th>-->
                    <!--                    <th>产品到货重量</th>-->
                    <!--                    <th>产品结算金额</th>-->

                    <th v-if="listdata.length != 0 && listdata[0].sellcode !== '' && listdata[0].sellcode !== undefined">销售单号</th>
                    <th v-if="listdata.length != 0 && listdata[0].createtime !== '' && listdata[0].createtime !== undefined">订单时间</th>
                    <th v-if="listdata.length != 0 && listdata[0].depname !== '' && listdata[0].depname !== undefined">销售部门</th>
                    <th v-if="listdata.length != 0 && listdata[0].applyname !== '' && listdata[0].applyname !== undefined">销售人员</th>
                    <th v-if="listdata.length != 0 && listdata[0].customername !== '' && listdata[0].customername !== undefined">客户名称</th>
                    <th v-if="listdata.length != 0 && listdata[0].arriaddres !== '' && listdata[0].arriaddres !== undefined">收货地址</th>
                    <th v-if="listdata.length != 0 && listdata[0].customerphone !== '' && listdata[0].customerphone !== undefined">联系电话</th>
                    <th v-if="listdata.length != 0 && listdata[0].storeroomname !== '' && listdata[0].storeroomname !== undefined">出库库房</th>
                    <th v-if="listdata.length != 0 && listdata[0].loadweight !== '' && listdata[0].loadweight !== undefined">出库总重量</th>
                    <th v-if="listdata.length != 0 && listdata[0].unloadweight !== '' && listdata[0].unloadweight !== undefined">到货总重量</th>
                    <th v-if="listdata.length != 0 && listdata[0].finalamount !== '' && listdata[0].finalamount !== undefined">结算总金额</th>
                    <th v-if="listdata.length != 0 && listdata[0].productname !== '' && listdata[0].productname !== undefined">产品名称</th>
                    <th v-if="listdata.length != 0 && listdata[0].spname !== '' && listdata[0].spname !== undefined">规格</th>
                    <th v-if="listdata.length != 0 && listdata[0].siloadweihgt !== '' && listdata[0].siloadweihgt !== undefined">产品出库重量</th>
                    <th v-if="listdata.length != 0 && listdata[0].siunloadweight !== '' && listdata[0].siunloadweight !== undefined">产品到货重量</th>
                    <th v-if="listdata.length != 0 && listdata[0].sifinalamount !== '' && listdata[0].sifinalamount !== undefined">产品结算金额</th>

                </tr>
                </thead>
                <tbody>
                <template v-for="(item) in afterList" >
                    <tr class="id9"  v-for="(row, i) in item" >
                        <!--                    <td>{{row.srname}}</td>-->
                        <!--                    <td v-if="listdata[0] !== undefined && (othercondition== 'sh' || othercondition== 'product' || othercondition== 'sp') " >{{row.shname}}</td>-->
                        <!--                    <td v-if="listdata[0] !== undefined && listdata[0].companyname !== '' && listdata[0] !== undefined && listdata[0].companyname !== undefined && showCompany  " >{{row.companyname}}</td>-->
                        <!--                    <td v-if="listdata[0] !== undefined && (othercondition== 'sp' || othercondition== 'product') " >{{row.productname}}</td>-->
                        <!--                    <td v-if="listdata[0] !== undefined && othercondition== 'sp' " >{{row.specname}}</td>-->
                        <td v-if="listdata.length != 0 && listdata[0].sellcode !== '' && listdata[0].sellcode !== undefined && i === 0" :rowspan="item.length">{{row.sellcode}}</td>
                        <td v-if="listdata.length != 0 && listdata[0].createtime !== '' && listdata[0].createtime !== undefined && i === 0" :rowspan="item.length">{{row.createtime}}</td>
                        <td v-if="listdata.length != 0 && listdata[0].depname !== '' && listdata[0].depname !== undefined && i === 0" :rowspan="item.length">{{row.depname}}</td>
                        <td v-if="listdata.length != 0 && listdata[0].applyname !== '' && listdata[0].applyname !== undefined && i === 0" :rowspan="item.length">{{row.applyname}}</td>
                        <td v-if="listdata.length != 0 && listdata[0].customername !== '' && listdata[0].customername !== undefined && i === 0" :rowspan="item.length">{{row.customername}}</td>
                        <td v-if="listdata.length != 0 && listdata[0].arriaddres !== '' && listdata[0].arriaddres !== undefined && i === 0" :rowspan="item.length">{{row.arriaddres}}</td>
                        <td v-if="listdata.length != 0 && listdata[0].customerphone !== '' && listdata[0].customerphone !== undefined && i === 0" :rowspan="item.length">{{row.customerphone}}</td>
                        <td v-if="listdata.length != 0 && listdata[0].storeroomname !== '' && listdata[0].storeroomname !== undefined && i === 0" :rowspan="item.length">{{row.storeroomname}}</td>
                        <td v-if="listdata.length != 0 && listdata[0].loadweight !== '' && listdata[0].loadweight !== undefined && i === 0" :rowspan="item.length">{{row.loadweight}}</td>
                        <td v-if="listdata.length != 0 && listdata[0].unloadweight !== '' && listdata[0].unloadweight !== undefined && i === 0" :rowspan="item.length">{{row.unloadweight}}</td>
                        <td v-if="listdata.length != 0 && listdata[0].finalamount !== '' && listdata[0].finalamount !== undefined && i === 0" :rowspan="item.length">{{row.finalamount}}</td>
                        <td v-if="listdata.length != 0 && listdata[0].productname !== '' && listdata[0].productname !== undefined">{{row.productname}}</td>
                        <td v-if="listdata.length != 0 && listdata[0].spname !== '' && listdata[0].spname !== undefined">{{row.spname}}</td>
                        <td v-if="listdata.length != 0 && listdata[0].siloadweihgt !== '' && listdata[0].siloadweihgt !== undefined">{{row.siloadweihgt}}</td>
                        <td v-if="listdata.length != 0 && listdata[0].siunloadweight !== '' && listdata[0].siunloadweight !== undefined">{{row.siunloadweight}}</td>
                        <td v-if="listdata.length != 0 && listdata[0].sifinalamount !== '' && listdata[0].sifinalamount !== undefined">{{row.sifinalamount}}</td>

                    </tr>
                </template>
                </tbody>
            </table>

        </div>


    </div>
</template>

<script>
    import Pagination from '../common/Pagination.vue'
    export default {
        name: 'Exporywhinform',
        components: {Pagination},
        data () {
            return {
                departments: [],
                currentDepart: '',
                applyers: [],
                currentApply: '',
                storeroom:[],
                currentRoom: '',
                customers: [],
                currentCustomer: '',
                products: [],
                currentProduct: '',
                sps: [],
                currentSp: '',
                status: [],
                currentStatus: '',
                currentPage: 1,
                rows: 10,
                totalPage: 0,
                afterList: [],
                starttime:"",
                endtime:"",
                srguid:"",
                listdata:[],
                exportpage:1,
                depcondition: '',
                applycondition: '',
                srcondition: '',
                customercondition: '',
                ordercondition: '',
            }
        },
        mounted() {
            let that = this;
            this.getRoomsAndDepart();
            this.getProduct();
            this.getCustomer();
            this.getApplyer();
            this.getSps();
            this.getStatus();
            this.starttime = this.getNowMonthDate();
            this.endtime = this.getDate(-1);
            layui.use('laydate', function(){
                var laydate = layui.laydate;

                //执行一个laydate实例
                laydate.render({
                    elem: '#starttime', //指定元素
                    value: that.getNowMonthDate()
                });
                //执行一个laydate实例
                laydate.render({
                    elem: '#endtime', //指定元素
                    value: that.getDate(-1)
                });
            });
        },
        updated: function () {
            layui.form.render('select', 'storeroom');
            layui.form.render();
        },
        methods: {
            //获取当前日期
            getDate: function (dayCount = 0) {
                var dd = new Date();
                dd.setDate(dd.getDate()+dayCount);//设置日期
                var y = dd.getFullYear();
                var m = dd.getMonth()+1;//获取当前月份的日期
                var fullM = m.length == 2 ? m : '0' + m;
                var d = dd.getDate();
                return y+"-"+fullM+"-"+d;
            },
            //获取本月第一天
            getNowMonthDate: function () {
                var date = new Date();
                var year = date.getFullYear() + "";
                var month = (date.getMonth() + 1) + "";
                // 本月第一天日期
                var begin = year + "-" + month + "-01"
                return begin;
            },
            // 数据转换
            tansList () {
                this.afterList = Object.values(this.listdata.reduce((temp, item) => {
                    if( temp[item.sellcode] ) {
                        temp[item.sellcode].push(item)
                    }else {
                        temp[item.sellcode]  = [item]
                    }
                    return temp
                },{}))
            },
            search: function() {
                this.getPageData('search');
            },
            getPageData: function(type = '') {
                var that = this;
                let loader = layui.layer.load();

                let postData = {};
                postData = this.setPostData(type);

                $.ajax({
                    url: '/sales/Sellform!rptSellForm.action',
                    type: "post",
                    data: postData,
                    dataType: "json",
                    success: function(res) {
                        if (res.status == 'true') {
                            that.listdata = res.result;
                            that.tansList()
                        } else {
                            that.alert("系统错误");
                        }
                    },
                    complete: function () {
                        layer.close(loader);
                    }
                });
            },
            getRoomsAndDepart: function() {
                let that = this;
                $.ajax({
                    url: '/produce/ProductionDaily!showProdWx.action?funcType=' + 11,
                    type: "get",
                    dataType: "json",
                    async:false,
                    success: function(res) {
                        if (res.msg == 'success') {
                            // this.storeroom = res.srs;
                            // this.departments = res.departs;
                            $("#currentRoom").empty();
                            $('#currentRoom').append(new Option('请选择库房', ""));
                            $.each(res.srs, function (index, item) {
                                $('#currentRoom').append(new Option(item.name , item.guid));// 下拉菜单里添加元素。
                            });

                            $("#currentDepart").empty();
                            $('#currentDepart').append(new Option('请选择部门', ""));
                            $.each(res.departs, function (index, item) {
                                $('#currentDepart').append(new Option(item.name , item.guid));// 下拉菜单里添加元素。
                            });
                        } else {
                            that.toast('获取库房和部门数据失败！');
                        }
                    }
                });
                // this.$post('/produce/ProductionDaily!showProdWx.action', {funcType: 11})
                //     .then(response => {
                //         if (response.data.msg == 'success') {
                //             this.storeroom = response.data.srs;
                //             this.departments = response.data.departs;
                //         } else {
                //             this.toast('获取库房和部门数据失败！');
                //         }
                //     })
                //     .catch(error => {
                //         // 请求失败
                //         console.log(error)
                //     })
            },
            // filterData: function (item) {
            //     new Option(item.productname , item.guid);
            // },
            getProduct: function() {
                let that = this;
                $.ajax({
                    url: '/sales/Sellform!findProductinfo.action',
                    type: "get",
                    dataType: "json",
                    async:false,
                    success: function(res) {
                        if (res.status == 'true') {
                            //this.products = res.result;
                            $("#currentProduct").empty();
                            $('#currentProduct').append(new Option('请选择产品', ""));
                            $.each(res.result, function (index, item) {
                                $('#currentProduct').append(new Option(item.productname , item.guid));// 下拉菜单里添加元素。
                            });
                        } else if (res.result == '登录异常') {
                            alert('会话已过期，请重新登录！')
                            that.$router.push({  name:'Login' })
                        } else {
                            that.toast('获取产品数据失败！');
                        }
                    }
                });
                // this.$post('/sales/Sellform!findProductinfo.action')
                //     .then(response => {
                //         let data = response.data;
                //         if (data.status == 'true') {
                //             this.products = data.result;
                //         } else {
                //             this.toast('获取产品数据失败！');
                //         }
                //
                //     }) .catch(error => {
                //         console.log(error)
                //     })
            },
            getCustomer: function() {
                let that = this;
                $.ajax({
                    url: '/sales/Sellform!findCustomer.action',
                    type: "get",
                    dataType: "json",
                    async:false,
                    success: function(res) {
                        if (res.status == 'true') {
                            //this.customers = res.result;
                            $("#currentCustomer").empty();
                            $('#currentCustomer').append(new Option('请选择客户', ""));
                            $.each(res.result, function (index, item) {
                                $('#currentCustomer').append(new Option(item.name , item.guid));// 下拉菜单里添加元素。
                            });
                        } else {
                            that.toast('获取客户数据失败！');
                        }
                    }
                });
                // this.$post('/sales/Sellform!findCustomer.action')
                //     .then(response => {
                //         let data = response.data;
                //         if (data.status == 'true') {
                //             this.customers = data.result;
                //         } else {
                //             this.toast('获取客户数据失败！');
                //         }
                //
                //     }) .catch(error => {
                //         console.log(error)
                //     })
            },
            getApplyer: function() {
                let that = this;
                $.ajax({
                    url: '/sales/Salespermission!findSalseUser.action',
                    type: "get",
                    dataType: "json",
                    async:false,
                    success: function(res) {
                        if (res !== undefined && res.info !== undefined) {
                            //this.sps = res.result;
                            $("#currentApply").empty();
                            $('#currentApply').append(new Option('请选择销售人员', ""));
                            $.each(res.info.users, function (index, item) {
                                $('#currentApply').append(new Option(item.realname + "(" + item.telphone + ")" , item.guid));// 下拉菜单里添加元素。
                            });
                        } else {
                            that.toast('获取销售人员数据失败！');
                        }
                    }
                });
            },
            getSps: function() {
                let that = this;
                $.ajax({
                    url: '/sales/Sellform!findSalesspecification.action',
                    type: "get",
                    dataType: "json",
                    async:false,
                    success: function(res) {
                        if (res.status == 'true') {
                            //this.sps = res.result;
                            $("#currentSp").empty();
                            $('#currentSp').append(new Option('请选择规格', ""));
                            $.each(res.result, function (index, item) {
                                $('#currentSp').append(new Option(item.name , item.guid));// 下拉菜单里添加元素。
                            });
                        } else {
                            that.toast('获取规格数据失败！');
                        }
                    }
                });
                // this.$post('/sales/Sellform!findSalesspecification.action')
                //     .then(response => {
                //         let data = response.data;
                //         if (data.status == 'true') {
                //             this.sps = data.result;
                //         } else {
                //             this.toast('获取规格数据失败！');
                //         }
                //
                //     }) .catch(error => {
                //         console.log(error)
                //     })
            },
            getStatus: function() {
                let that = this;
                $.ajax({
                    url: '/sales/Sellform!findDict.action?type=' + 17,
                    type: "post",
                    dataType: "json",
                    success: function(res) {
                        that.status = res;
                    }
                });

                // this.$post('/sales/Sellform!findDict.action', {type: 17})
                //     .then(response => {
                //     if (response.statusText == "OK") {
                //         that.status = response.data;
                //     } else {
                //         this.toast('获取状态数据失败');
                //     }
                // });
            },
            exportExcel:function (){
                var that = this;

                let postData = {};
                postData = this.setPostData();

                window.location.href="/repository/RptStoreanalysis!exportOrderData.action?starttime=" + that.starttime + "&endtime=" + that.endtime + "&srguid=" + that.srguid   + "&othercondition=" + that.othercondition +  "&orgguidcondition=" + postData.orgguidcondition
            },
            setPostData: function (type = '') {
                let that = this;

                let postData = {pageSize: that.rows ,pageNo:this.exportpage};
                if (type != 'search') {
                    postData.page = that.currentPage;
                }
                that.starttime = $('#starttime').val();
                that.endtime = $('#endtime').val();
                that.srguid =  $('#srguid').val();
                that.depcondition =  $('#depcondition').is(':checked') ? $('#depcondition').val() : '';
                that.applycondition =  $('#applycondition').is(':checked') ? $('#applycondition').val() : '';
                that.srcondition =  $('#srcondition').is(':checked') ? $('#srcondition').val() : '';
                that.customercondition =  $('#customercondition').is(':checked') ? $('#customercondition').val() : '';
                that.ordercondition =  $('#ordercondition').val();

                that.currentDepart = $('#currentDepart').val();
                that.currentApply = $('#currentApply').val();
                that.currentRoom = $('#currentRoom').val();
                that.currentCustomer = $('#currentCustomer').val();
                that.currentProduct = $('#currentProduct').val();
                that.currentSp = $('#currentSp').val();
                that.currentStatus = $('#currentStatus').val();

                postData.starttime = that.starttime;
                postData.endtime = that.endtime;
                postData.srguid = that.srguid;
                postData.depcondition = that.depcondition;
                postData.applycondition = that.applycondition;
                postData.srcondition = that.srcondition;
                postData.customercondition = that.customercondition;
                postData.ordercondition = that.ordercondition;

                postData.depguid = that.currentDepart;
                postData.operatorid = that.currentApply;
                postData.storermguid = that.currentRoom;
                postData.customerguid = that.currentCustomer;
                postData.productguid = that.currentProduct;
                postData.spguid = that.currentSp;
                postData.status = that.currentStatus;
                return postData;
            }
        }
    }
</script>
